<template>
  <view class="ass-suggest" v-if="shareData" @click="go">
    <view class="suggest">我推荐{{ shareData.name }}</view>
    <view class="ass-suggest-content ss-flex">
      <image :src="cdnUrl(shareData.promotion.image)" />
      <view class="ss-flex-col ss-row-between ss-flex-1">
        <view class="title ss-line-1">
          {{ shareData.promotion.title }}
        </view>
        <view class="sub-title ss-line-2">
          <!-- {{shareData.content}} -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import sheep from '@/sheep';
import { computed, toRaw } from 'vue';
import { envVersion } from '@/association/config.js';
import { cdnUrl } from '@/association/utils';
import association from '@/association/store';
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});
const theme = computed(() => association().theme);
const go = () => {
  if (theme.value.platform == props.data.platform) {
    // console.log(toRaw(props.data));

    let link = '/pagesChlid/hotel_info?id=' + props.data.id;
    sheep.$router.go(link);
  } else {
    // #ifdef MP-WEIXIN
    uni.navigateToMiniProgram({
      appId: props.data.app_id,
      path: props.data.link,
      envVersion,
      extraData: {
        // 'data1': 'test'
      },
      success(res) {
        // 打开成功
        console.log(res);
      },
    });
    // #endif
  }
};
const shareData = computed(() => {
  if (props.data.type) {
    return {
      ...props.data,
      promotion: {
        ...props.data,
      },
    };
  }

  let type = '';
  let name = '';
  if (props.data.goods_promotion) {
    type = 'goods';
    name = '酒店';
  } else if (props.data.group_promotion) {
    type = 'group';
    name = '套餐';
  } else if (props.data.store_promotion) {
    type = 'store';
    name = '店铺';
  }
  if (type) {
    return {
      type,
      name,
      promotion: props.data[`${type}_promotion`],
    };
  } else {
    return false;
  }
});
</script>

<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.ass-suggest {
  margin: 30rpx 50rpx !important;

  .suggest {
    margin-bottom: 10rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
  }

  .ass-suggest-content {
    & > image {
      width: 120rpx;
      height: 120rpx;
      min-width: 120rpx;
      margin-right: 20rpx;
    }

    & > view {
      padding: 5rpx 10rpx;
      border-radius: 15rpx;
      height: 120rpx;
      background: #E8E1F6;

      .title {
        font-size: 28rpx;
        font-weight: 700;
      }

      .sub-title {
        font-size: 26rpx;
      }
    }
  }
}
</style>
